<template>

  <div class="">
    <!-- 头部搜索 -->
    <van-search
      v-model="value"
      show-action
      label="千峰商城"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @input="searchpic"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 下拉 -->
    <div class="searchResult" v-show="value">
      <van-card
        v-for="(item, i) in searchresult"
        :key="i"
        :price="item.price"
        :title="item.name"
        :thumb="item.coverImg"
        @click="searchItem(item._id)"
      />
    </div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="2000">
      <van-swipe-item v-for="(image, index) in banner" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 侧边导航 -->
    <van-row>
      <!-- 导航分类 -->
      <van-col span="5"
        ><van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item title="精 选" />
          <van-sidebar-item title="优 惠" />
          <van-sidebar-item title="抢 购" /> </van-sidebar
      ></van-col>
      <!-- 导航显示 -->
      <van-col span="19">
        <van-grid :border="false" :column-num="2">
          <van-grid-item @click="searchItem(selectNav[0].id)">
            <van-image :src="selectNav[0].path" />
            <p>{{ selectNav[0].text }}</p>
          </van-grid-item>
          <van-grid-item @click="searchItem(selectNav[1].id)">
            <van-image :src="selectNav[1].path" />
            <p>{{ selectNav[1].text }}</p>
          </van-grid-item>
        </van-grid>
      </van-col>
    </van-row>
    <!-- 限时秒杀 -->
    <van-row>
      <van-col span="12">
        <img :src="payoff.path" alt="" style="width: 190px" />
      </van-col>
      <van-col span="12" class="count" @click="searchItem(payoff.id)">
        <p>{{ payoff.name }}</p>
        <p>限时秒杀！{{ payoff.price }}元</p>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </van-col>
    </van-row>
    <!-- 所有图片 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="allpic"
    >
      <van-grid :border="false" :column-num="2">
        <van-grid-item
          v-for="(item, i) in list"
          :key="i"
          class="onepic"
          @click="searchItem(item._id)"
        >
          <van-image :src="item.coverImg" />
          <p>{{ item.name }}</p>
          <p>￥{{ item.price }}</p>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getHomeShop } from "@/api/home";
export default {
  data() {
    return {
      value: "",
      searchresult: [],
      list: [],
      banner: [],
      selectNav: [
        { path: "", text: "", id: "" },
        { path: "", text: "", id: "" },
      ],
      selectNavPage: 0,
      activeKey: 1,
      payoff: { path: "", name: "", price: "", id: "" },
      time: 30 * 60 * 60 * 1000,
      finished: false,
      loading: false,
      page: 2,
    };
  },
  computed: {},
  watch: {
    // 侧边导航选择
    selectNavPage: function () {
      this.selectNav = [];
      for (let i = 0; i < 2; i++) {
        this.selectNav.push({
          path: this.list[i + this.selectNavPage].coverImg,
          text: this.list[i + this.selectNavPage].name,
          id: this.list[i + this.selectNavPage]._id,
        });
      }
    },
  },

  methods: {
    // 初始化
    async init() {
      // 调取接口
      const result = await getHomeShop();
      this.list = result.products;
      // 存banner的图片,因为总数据太少只能这样重复利用
      this.banner = [];
      for (let i = 0; i < 3; i++) {
        this.banner.push(this.list[i].coverImg);
      }
      // 侧边nav
      for (let i = 0; i < 2; i++) {
        this.selectNav.push({
          path: this.list[i + this.selectNavPage].coverImg,
          text: this.list[i + this.selectNavPage].name,
        });
        // 此处是解决首次加载会拿不到内容报错
        this.selectNavPage = 2;
        this.payoff = {
          path: this.list[5].coverImg,
          name: this.list[5].name,
          price: this.list[5].price,
          id: this.list[5]._id,
        };
      }
    },
    // 搜索
    onSearch() {
      if (this.searchresult[0]) {
        this.$router.push("/detail/" + this.searchresult[0]._id);
      } else {
        Toast("妹东西让我搜什么");
      }
    },
    searchpic() {
      this.searchresult = [];
      this.list.forEach((v, i) => {
        if (v.name.includes(this.value)) {
          this.searchresult.push(v);
        }
      });
    },
    searchItem(id) {
      this.$router.push("/detail/" + id);
    },
    // 侧边导航切换
    onChange() {
      switch (this.activeKey) {
        case 0:
          this.selectNavPage = 0;
          break;
        case 1:
          this.selectNavPage = 2;
          break;
        case 2:
          this.selectNavPage = 4;
          break;
        default:
          break;
      }
    },
    // 下拉刷新更多
    async onLoad() {
      this.loading = true;
      this.finished = false;
      const result = await getHomeShop({ page: this.page });
      this.loading = false;
      this.list = [...this.list, ...new Set(result.products)];
      if (result.products.length < 10) {
        this.finished = true;
      } else {
        this.page++;
      }
    },
  },
  created() {
    // 调用初始化
    this.init();
  },

  mounted() {},
  components: {},
};
</script>

<style scoped></style>

<style scoped>
.van-card {
  margin-bottom: -10px;
}
.searchResult {
  position: absolute;
  width: 100%;
  top: 54px;
  z-index: 55;
}
/* banner轮播样式 */
.van-swipe img {
  width: 100%;
  height: 200px;
}
/* 侧边导航 */
.van-grid-item {
  height: 180px;
  font-size: 14px;
}
.van-sidebar-item {
  background: rgb(192, 192, 192);
}
.van-sidebar-item--select {
  background: #fff;
}
/* 倒计时 */
.count {
  padding-top: 20px;
}
.count p:nth-child(1) {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.count p:nth-child(2) {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  color: #f00;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  width: 50px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #ee0a24;
}
/* 所有图片 */
.allpic {
  padding-bottom: 80px;
}
.onepic {
  height: 250px;
}
.onepic img {
  width: 178px;
  height: 178px;
}
.onepic p:nth-child(2) {
  font-size: 16px;
  padding-top: 10px;
}
.onepic p:nth-child(3) {
  width: 100%;
  text-align: left;
  color: #f00;
}
</style>

